import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_topia/common_widget/bottom_button.dart';
import 'package:card_topia/common_widget/my_app_bar.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class GoodsDetailPage extends StatefulWidget {
  const GoodsDetailPage({super.key});

  @override
  State<GoodsDetailPage> createState() => _GoodsDetailPageState();
}

class _GoodsDetailPageState extends State<GoodsDetailPage> {
  PageController _pageController = PageController();
  final _picList = [
    "https://gw.alicdn.com/imgextra/i2/1030684261/O1CN01j5BUlg1hLaVAMXuXx_!!1030684261.jpg_Q75.jpg_.webp",
    "https://gw.alicdn.com/imgextra/i2/1030684261/O1CN01izOw4Q1hLaV32hZVV_!!1030684261.jpg_Q75.jpg_.webp",
    "https://gw.alicdn.com/imgextra/O1CNA14UEIJ01hLaVDVGy5R_!!1030684261-0-psf.jpg_Q75.jpg_.webp",
  ];
  int _currentPic = 0;
  bool _showAllDesc = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        showLeading: true,
        // title: "三国演义",
        actions: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(IconsaxOutline.export_1, size: 20.w, color: unSelectColor),
              SizedBox(
                height: 4.w,
              ),
              Text(
                "分享",
                style: TextStyle(
                    fontSize: 12.sp, fontFamily: harmony, color: unSelectColor),
              )
            ],
          ),
          SizedBox(
            width: 16.w,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(IconsaxOutline.info_circle,
                  size: 20.w, color: unSelectColor),
              SizedBox(
                height: 4.w,
              ),
              Text(
                "规则",
                style: TextStyle(
                    fontSize: 12.sp, fontFamily: harmony, color: unSelectColor),
              )
            ],
          ),
          SizedBox(
            width: 16.w,
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            //展示卡片
            Container(
              height: 500.w,
              width: double.infinity,
              child: PageView(
                key: ValueKey("dt"),
                onPageChanged: (index) {
                  setState(() {
                    _currentPic = index;
                  });
                },
                controller: _pageController,
                children: _picList
                    .map(
                      (e) => Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl: e,
                            fadeInDuration: Duration.zero,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
            SizedBox(
              height: 8.w,
            ),
            //缩略图
            Container(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  children: [
                    Container(
                        width: 60.w,
                        height: 48.w,
                        decoration: BoxDecoration(
                            color: Color(0xFF1d1d1e).withOpacity(0.1),
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(8.w),
                                bottomLeft: Radius.circular(8.w))),
                        alignment: Alignment.center,
                        child: Text(
                          "${_currentPic + 1}/${_picList.length}",
                          style: TextStyle(
                              fontSize: 20.sp,
                              fontFamily: harmony,
                              color: textColor),
                        )),
                    Container(
                      decoration: BoxDecoration(
                          color: Color(0xFF1d1d1e).withOpacity(0.1),
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(8.w),
                              bottomRight: Radius.circular(8.w))),
                      // padding: EdgeInsets.symmetric(horizontal: 12.w),
                      height: 48.w,
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Row(
                          children: _picList
                              .map((e) => InkWell(
                                    onTap: () {
                                      setState(() {
                                        _currentPic = _picList.indexOf(e);
                                        _pageController.jumpToPage(_currentPic);
                                        // _pageController.animateToPage(_currentPic, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
                                      });
                                    },
                                    child: Container(
                                      margin: EdgeInsets.only(
                                        right: 12.w,
                                      ),
                                      width: 36.w,
                                      height: 36.w,
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8.w),
                                          border:
                                              _currentPic == _picList.indexOf(e)
                                                  ? Border.all(
                                                      color: Colors.white,
                                                      width: 2.w,
                                                      strokeAlign: BorderSide
                                                          .strokeAlignOutside)
                                                  : null),
                                      child: ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(8.w),
                                          child: CachedNetworkImage(
                                            imageUrl: e,
                                            fit: BoxFit.cover,
                                          )),
                                    ),
                                  ))
                              .toList(),
                        ),
                      ),
                    )
                  ],
                )),
            //名称
            SizedBox(
              height: 16.w,
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              alignment: Alignment.centerLeft,
              child: Column(
                children: [
                  Text(
                    "卡游三国卡片群英耀世卡英雄青梅煮酒篇演义人物收藏卡包卡册卡牌",
                    style: TextStyle(fontSize: 18.sp, fontFamily: harmony,color: textColor),
                  ),
                  SizedBox(height: 8.w,),
                  Text(
                    "《三国演义》是中国明代小说家罗贯中所著的一部历史长篇小说，以三国时期为背景，讲述了从东汉末年到西晋建立的历史过程，其中涉及了众多历史人物的生平、战争、政治斗争、爱恨情仇等复杂情节，被誉为中国古代长篇小说的经典之作。",
                    style: TextStyle(fontSize: 14.sp, fontFamily: harmony,color: descColor),
                    maxLines: _showAllDesc?8:1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  InkWell(
                    onTap: (){
                      setState(() {
                        _showAllDesc = !_showAllDesc;
                      });
                    },
                    child: Container(
                        alignment: Alignment.centerRight,
                        margin: EdgeInsets.symmetric(horizontal: 16.w,vertical: 8.w),
                        child: Text(_showAllDesc?"收起":"展开",style: TextStyle(fontSize: 14.sp,fontFamily: harmony,color: themeColor),)),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 8.w),
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: Column(
                    children: [
                      Icon(IconsaxOutline.star_1,size: 24.w,color: textColor,),
                      SizedBox(height: 4.w,),
                      Text("收藏",style: TextStyle(fontSize: 12.sp,color: textColor),)
                    ],
                  ),
                ),
                Expanded(child: Container(
                    margin: EdgeInsets.only(right: 16.w),
                    child: BottomButton(text: "立即购买", enable: true)))
              ],
            ),
          ),
        ),
      ),
    );
  }
}
